<template>
  <div class="waper">
    <el-menu
        :default-openeds="state.defaultOpen"
        background-color="#fff"
        text-color="#333"
        :unique-opened="false"
        :default-active='state.currentPath'
      >
        <template v-for="(item, index) in state.menu">
          <el-submenu :index="index + ''" v-if="item.children && item.children.length > 0" :key="item.name">
            <template #title>
              <i class="icon" :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item :key="itemA.name " :index="itemA.url" v-for="(itemA) in item.children" @click="routeLink(itemA)"><i :class="itemA.icon" />{{ itemA.name  }}</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item v-else-if="item.url !== 'index'" :key="item.name" @click="routeLink(item)" :index="item.url">
            <i class="icon" :class="item.icon"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
</template>

<script>
import { reactive, onMounted, toRefs, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { localGet } from '@/utils';
import { mapState, mapActions } from "vuex";
import commonApi from "@/api/commonApi";
import { useStore } from "vuex";

export default {
  computed: {
    // ...mapState({userInfo: (state) => state.userInfo}),
    // ...mapActions({"cacc', "cart/userInfo"})
    // 获取按钮权限
    ...mapActions({
      'cacc': 'cart/getAuthButton'
    })
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const store = useStore();
    const state = reactive({
      defaultOpen: [],
      showMenu: true,
      currentPath: ''
    })
    // 路由跳转
    const routeLink = (items)=> {
      if (items.url != localStorage.getItem("pageName")) {
        localStorage.removeItem("flowCode");
        Object.keys(localStorage).map((item) => {
          if (
            (item.length > 6 && item.substr(-8) == "pageSize") ||
            item.substr(-6) == "pageNo" ||
            item.substr(-7) == "pageNo1" ||
            item.substr(-9) == "pageSize1" ||
            item.substr(-7) == "pageNo2" ||
            item.substr(-10) == "searchForm" ||
            item.substr(-9) == "pageSize2"
          ) {
            localStorage.removeItem(item);
          }
        });
      } else {
        Object.keys(localStorage).map((item) => {
          if (item.indexOf(items.url) != -1) {
            if (item != items.url + "pageSize" && item != items.url + "pageNo") {
              localStorage.removeItem(item);
            }
            if (item != items.url + "pageNo" && item != items.url + "pageSize") {
              localStorage.removeItem(item);
            }
          }
        });
      }
      router.push({
        name: items.url
      })
    }
    // 获取菜单
    const getAuthMenu = async ()=> {
      const userInfo = store.state.cart.userInfo;
      let res = await commonApi.getAuthMenu({
        accountId: userInfo ? userInfo.userid : "",
        type: "MENU",
        appCode: "hxmb"
      });
      let newData = JSON.parse(JSON.stringify(res.data.data));
      // 初始化菜单事件
      newData.map((item) => {
        if (!item.icon) {
          item.icon = "el-icon-eleme";
        }
      });
      // console.log(newData)
      state.menu = newData;
      state.currentPath = localGet('pageName') || route.name;
    }
    onMounted(() => {
      setTimeout(()=> {
        getAuthMenu();
      });
    })
    return {
      state,
      routeLink
    }
  }
}
</script>

<style scoped>
  .waper {
    width: 100%;
    height: 100%;
  }
  .el-submenu .icon,
  .el-menu-item .icon {
    margin-right: 10px;
  }
  .avatar-uploader {
    width: 100px;
    height: 100px;
    color: #ddd;
    font-size: 30px;
  }
  .avatar-uploader-icon {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #e9e9e9;
    padding: 32px 17px;
  }
</style>